<template>
  <div>
        <div>
            <input type="text" placeholder="请输入任务"  @input="$emit('input',$event.target.value)" />
            <button v-on:click="$emit('getTask')">提交任务</button>
        </div>
        <div>
            <ul>
                <li v-on:click="$emit('done',item.id)" v-for="item in showTask" v-bind:key="item.id" v-bind:class="item.state">
                    {{ item.task }}
                </li>
            </ul>
        </div>
        <div>
            <button v-on:click="$emit('changeBtn','all')" v-bind:class="{ active: btnState == 'all' }">
                全部
            </button>
            <button v-on:click="$emit('changeBtn','done')" v-bind:class="{ active: btnState == 'done' }">
                已完成
            </button>
            <button v-on:click="$emit('changeBtn','undone')" v-bind:class="{ active: btnState == 'undone' }">
                未完成
            </button>
        </div>
    </div>
</template>

<script>
export default {
    props:["showTask","btnState","inputTask","getTask"],
    methods:{
        // getInpV(e){
        //     let v=e.target.value;
        //     this.$
        // }
    }
}
</script>

<style scoped>
.active {
    border: 1px solid red;
    background-color: red;
    color: white;
}

.done {
    color: pink;
    text-decoration: line-through;
}

.undone {
    color: aqua;
}
</style>